<template>
    <div class="footer-box">
        <van-tabbar v-model="active" active-color="">
            <van-tabbar-item icon="wap-home" to="/home">首页</van-tabbar-item>
            <!-- <van-tabbar-item icon="apps-o" to="/classify/classifyList">分类</van-tabbar-item> -->
            <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact" to="/user">我</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem, Icon } from 'vant';

Vue.use(Tabbar)
    .use(TabbarItem)
    .use(Icon);

export default {
    props: {
        page: Number,
    },
    data() {
        return {
            active: this.page
        }
    }
}
</script>

<style lang="scss" scoped>
    .footer-box {
        position: fixed;
        z-index: 100;
        bottom: 0;
    }
</style>


